<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>survey form</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <!-- form container -->
  <div class="container">
    <h1 class="main-heading">Survey Form:</h1>
    <hr>
    <!-- form start -->
    <form class="form-class"  method="post">
    
      <!-- name -->
      <div form-control>

        <div class="heading-field">
          <h3 class="field-head">Customer Name</h3>
        </div>
        <div class="field-inputs">
          <div class="input-div">
            <input 
            type="text" 
            class="form-control-input" 
            id="first-name" 
            name="first name" 
            required
            >
            <div id="first-name-help" class="help-text">Enter Your First Name
            </div>
          </div>

          <div class="input-div">
            <input 
            type="text" 
            class="form-control-input" 
            id="last-name" 
            name="last name" 
            required
            >
            <div id="last-name-help" class="help-text">Enter Your last Name
            </div>
          </div>
        </div>
      </div>
      <!-- name ends -->

      <!-- address -->
      <div class="form-control">
        <div class="heading-field">
          <h3 class="field-head">Address</h3>
        </div>

        <div>
          <div class="input-div">
            <input type="text" class="form-control-input" id="street-address" name="address" required>
            <div id="street-address-help" class="help-text">Street Address</div>
          </div>
        </div>

        <div>
          <div class="input-div">
            <input type="text" class="form-control-input" id="street-address-2" name="address" required>
            <div id="street-address-2-help" class="help-text">Street Address Line 2
            </div>
          </div>
        </div>

        <div class="field-inputs">
            <div class="input-div">
              <input type="text" class="form-control-input" id="city-name" name="city" required>
              <div id="city-help" class="help-text">City</div>
            </div>
            
            <div class="input-div">
              <input type="text" class="form-control-input" id="state-name" name="state" required>
              <div id="state-help" class="help-text">State</div>
            </div>
        </div>

        <div class="field-inputs">
          <div class="input-div">
            <input type="number" class="form-control-input" id="zip-code" name="zip" required>
            <div id="zip-code-help" class="help-text">Zip</div>
          </div>
        </div>

        <div class="input-div">
          <select class="form-control-input" name="country" required>
            <option value="China">China</option>
            <option value="America">America</option>
            <option value="Finland">Finland</option>
          </select>
          <div>Select Country</div>
        </div>

      </div>  
      <!-- address ends -->

      <!-- contact -->
      <div class="form-control">

        <div class="heading-field">
          <h3 class="field-head">Contact</h3>
        </div>

        <div class="field-inputs">
          <div class="input-div">
            <input type="tel" class="form-control-input" id="first-name" name="contact" required>
            <div id="tel-name-help" class="help-text">Phone</div>
          </div>
          <div class="input-div">
            <input type="email" class="form-control-input" id="email" name="email" required>
            <div id="last-name-help" class="help-text">Email</div>
          </div>
        </div>
      </div>
      <!-- contact ends -->

      <!-- person detail -->
      <div class="form-control">
        <div class="heading-field">
          <h3 class="field-head">Personal Details</h3>
        </div>
        <div class="field-inputs">
          <div class="input-div">
            <input type="radio" name="gender" id="male" value="male">
            <label for="male">Male</label>
            <br>
            <input type="radio" name="gender" id="female" value="female">
            <label for="female">Female</label>
            <br>
            <input type="radio" name="gender" id="other" value="other">
            <label for="other">Other</label>
            <br>
          </div>
        </div>
      </div>  
      <!-- personal detail ends -->
      
      <!-- rate -->
      <div class="form-control">
        <div class="heading-field">
          <h3 class="field-head">Ratings</h3>
        </div>

        <div class="field-inputs" style="margin: .5rem 0px">
          <h5>Rating 1:</h5>
          <div class="input-div" style="display: flex; gap: 10px">
            <input type="radio" name="rating1" id="bad" value="bad">
            <label for="bad">Bad</label><br>
            <input type="radio" name="rating1" id="good" value="good">
            <label for="good">Good</label><br>
            <input type="radio" name="rating1" id="excellent" value="other">
            <label for="excellent">Excellent</label><br>
          </div>
        </div>

        <div class="field-inputs" style="margin: .5rem 0px">
          <h5>Rating 2:</h5>
          <div class="input-div" style="display: flex; gap: 10px">
            <input type="radio" name="rating2" id="bad2" value="bad">
            <label for="bad2">Bad</label><br>
            <input type="radio" name="rating2" id="good2" value="good">
            <label for="good2">Good</label><br>
            <input type="radio" name="rating2" id="excellent2" value="other">
            <label for="excellent2">Excellent</label><br>
          </div>
        </div>

        <div class="field-inputs" style="margin: .5rem 0px">
          <h5>Rating 3:</h5>
          <div class="input-div" style="display: flex; gap: 10px">
            <input type="radio" name="rating3" id="bad3" value="bad">
            <label for="bad3">Bad</label><br>
            <input type="radio" name="rating3" id="good3" value="good3">
            <label for="good">Good</label><br>
            <input type="radio" name="rating3" id="excellent3" value="other">
            <label for="excellent3">Excellent</label><br>
          </div>
        </div>   

      </div>
      <!-- rate ends -->

      <button type="submit">Submit</button>

    </form>
    <!-- form ends -->
  </div>
  <!-- form container ends -->

</body>
</html>